<template>

<div class="selectParentSet" >
     <!-- 列表 -->
      <a-table
        :columns="columns"
        :components="components"
        :data-source="data"
        :row-selection="rowSelection"
        :scroll="{ x: 500, y: 600 }"
        bordered
        :pagination="false"
      >
        <template slot="val" slot-scope="text, record">
            <form-select v-if=" record.type == '下拉'"
              title="下拉效果"
              size="small"
              selectStyle="width:100%;"
              labelStyle="display: none;"
              :dataList="valForFormFN(text)"
               v-model="record.value"
            >
            </form-select>
          <form-radio v-if="record.type == '单选'"
              title="单选效果"
             labelStyle="display: none;"
              keyPre="menuType"
              :dataList="valForFormFN(text)"
               v-model="record.value"
            >
            </form-radio>
             <form-check-box v-if="record.type == '复选'"
              title="复选效果"
              labelStyle="display: none;"
              :dataList="valForCheckBoxFN(text)"
               v-model="record.value"
            >
            </form-check-box>
          <form-radio v-if="record.type == '是否'"
              title="是否效果"
              labelStyle="display: none;"
              keyPre="menuType"
               v-model="record.value"
              :dataList="[
                { key: '是', title: '是' },
                { key: '否', title: '否' }
              ]"
            ></form-radio>
            <form-date-picker v-if="record.type == '日期'"
              title="日期效果"
              labelStyle="display: none;"
               v-model="record.value"
            ></form-date-picker>
            <form-date-picker v-if="record.type == '时间'"
              title="日期效果"
              show-time
              format="YYYY-MM-DD HH:mm"
              labelStyle="display: none;"
               v-model="record.value"
            ></form-date-picker>
             <form-input-number v-if="record.type == '整数'"
              title="整数效果"
              labelStyle="display: none;"
              :precision="0"
              :step="1"
              v-model="record.value"
            ></form-input-number>
            <form-input-number v-if="record.type == '小数'"
              title="小数效果"
              labelStyle="display: none;"
              :step="0.1"
              v-model="record.value"
            ></form-input-number>
        </template>
        
        <template slot="onOff" slot-scope="text">
          <a-checkbox :disabled="true" :checked="text">
          </a-checkbox>
        </template>
        <template slot="onFill" slot-scope="text">
          <a-checkbox :disabled="true" :checked="text">
          </a-checkbox>
        </template>
        <template slot="isSearch" slot-scope="text">
          <a-checkbox :disabled="true" :checked="text">
          </a-checkbox>
        </template>
    </a-table>
</div>
</template>

<script>
import {components} from  "@/utils/antTableComponents";
import {DefineFieldList} from "@/api/crm/set";

export default {
    name:"selectParentSet",
    props:{
        value:{
            type: Array,
            default: ()=>[]
        },
        source:{
            type: String,
            default: ""
        },
        //
        disableKeys:{
            type: Array,
            default: ()=>[]
        }
        
    },
    data(){
    const columns = [
        {
          title: "排序",
          dataIndex: "sort",
          width: 40,
          key: "sort",
        },
        {
        title: "默认字段",  
        dataIndex: "sysName",
        key: "sysName",
        align: "left",
        width: 100,
      },
      {
        title: "显示字段",
        dataIndex: "name",
        key: "name",
        width: 100,
      },
      {
        title: "来源",
        dataIndex: "source",
        key: "source",
        width: 50,
         customRender: (text, row, index) => {
           let heml = null;
          switch(text){
            case "crm":     heml = "客户";break;
            case "linkMan": heml = "联系人";break;
            case "touch":   heml = "联系人记录";break;
          }
          return heml;
        }
      },
       {
        title: "数据类型",
        dataIndex: "dataType",
        key: "dataType",
        width: 80,
         customRender: (text, row, index) => {
           let heml = null;
          switch(text){
            case 1: heml = "基础字段";break;
            case 2: heml =  "完全自定义";break;
            case 3: heml =  "继承基础";break;
            case 4: heml =  "继承自定义";break;
          }
          return heml;
        }
      },
       {
        title: "字段类型",
        dataIndex: "type",
        key: "type",
        width: 80,
      },
      {
        title: "字段内容",
        dataIndex: "val",
        width: 300,
        key: "val",
        scopedSlots: { customRender: 'val' },
      },
   
      {
        title: "是否启用",
        dataIndex: "onOff",
        width: 60,
        key: "onOff",
        scopedSlots: { customRender: 'onOff' },
      },
      {
        title: "是否必填",
        dataIndex: "onFill",
        width: 60,
        key: "onFill",
        scopedSlots: { customRender: 'onFill' },
      },
      {
        title: "查询条件",
        dataIndex: "isSearch",
        width: 60,
        key: "isSearch",
        scopedSlots: { customRender: 'isSearch' },
      }
    ];

     //表格 头部 可伸缩
    this.components = components(columns);
      return{
        parentSource:[],
        data:[],
        allData:[],
        columns,
        selectedRowKeys: this.value.map((item)=>item.key)      //选择的项
      }
    },
    mounted () {
       let {source} = this;
      this.getParentSource();
      this.initData();
   
    },
    computed:{
        valForForm:function(){
            let {editItemVal} = this;
              console.log("valForForm_editItemVal",editItemVal);
            let arr = new Array();
            if(editItemVal){
               let vals = editItemVal.split(",");
                 console.log("valForForm_vals",vals);
               arr = vals.map((item, index, arr) => {
                    return {key:item,title:item};
              })
            }
            console.log("valForForm",arr);
            return arr;
        },
        valForCheckBox:function(){
            let {editItemVal} = this;
              console.log("valForCheckBox_editItemVal",editItemVal);
            let arr = new Array();
            if(editItemVal){
               let vals = editItemVal.split(",");
                 console.log("valForCheckBox_vals",vals);
               arr = vals.map((item, index, arr) => {
                    return {label:item,value:item};
              })
            }
            console.log("valForCheckBox",arr);
            return arr;
        },
        rowSelection() {
          const {disableKeys} = this;
          console.log("SelectSet_disableKeys",disableKeys);
            return {
                selectedRowKeys:this.selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                  this.selectedRowKeys = selectedRowKeys;
                  this.$emit("input", selectedRows);
                  console.log(`selectedRowKeys: `,selectedRowKeys, 'selectedRows: ', selectedRows);
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: disableKeys.includes(record.key) , // Column configuration not to be checked
                        // name: record.name,
                        // indeterminate: disableKeys.includes(record.key)
                    },
                }),
            };
        },
    },
    methods:{
        getParentSource(){
            let {source} = this;
            if(source == "linkMan" || source == "business" || source == "finance"){
              this.parentSource = ["crm"];
            }else if(source == "touch"){
              this.parentSource = ["crm","linkMan"];
            }
        },
        initData(){
            let {parentSource} = this;
            this.data = [];
            parentSource.forEach((source)=>{
                let postData = {
                  source
                };
                this.List(postData);
            });
            
        },
        List(postData) {
          this.data = [];
            DefineFieldList(postData)
            .then(response => {
                if (response.code === 200) {
                let { data } = response;
                data = data.filter(f=>(f.dataType == 1 || f.dataType == 2));
                data.map((item)=>{
                    item.key = item.source + "_" + item.code;
                });;
                //合并数据
                this.data = [...this.data,...data].filter(f=>f.code != "crmName");
                }
            })
            .catch(error => {});
        },
        valForFormFN(editItemVal){
            let arr = new Array();
            if(editItemVal){
               let vals = editItemVal.split(",");
               arr = vals.map((item, index, arr) => {
                    return {key:item,title:item};
              })
            }
            console.log("valForFormFN",arr);
            return arr;
        },
        valForCheckBoxFN(editItemVal){
            let arr = new Array();
            if(editItemVal){
            let vals = editItemVal.split(",");
            arr = vals.map((item, index, arr) => {
                    return {label:item,value:item};
            })
            }
            console.log("valForCheckBoxFN",arr);
            return arr;
        },
    }
}
</script>

<style lang="less">
 .selectParentSet{
    .ant-table-scroll > .ant-table-body{
        height: 100%;
    }
    .form-group{
      width: 100%;
    }
    td .form-group{
      margin: 0;
    }
    .test{
        border:1px solid #ccc;
    }
    .drag-item{
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        position: relative;
        background: #ddd;
        margin-top:20px;
    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
        width: 200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }

    .ant-table-selection-column  .ant-checkbox-disabled  .ant-checkbox-inner{
      border-color: red !important;
    }
 }
 
 
 
</style>